/**
 * 底部导航栏组件
 * 提供应用主要功能模块的快速导航
 * 
 * 功能说明：
 * - 使用antd-mobile的TabBar组件
 * - 支持路由自动高亮
 * - 提供四个主要功能入口
 * - 适配移动端底部导航体验
 * 
 * @author 项目开发团队
 * @version 1.0.0
 */

import React from 'react'
import { useNavigate, useLocation } from 'react-router-dom'
import { TabBar } from 'antd-mobile'
import styles from './index.module.css'

/**
 * 底部导航栏组件
 * 使用React Router的hooks获取当前路径和导航函数
 * @returns {JSX.Element} 底部导航栏组件
 */
const BottomNav = () => {
  const navigate = useNavigate()    // 路由导航函数
  const location = useLocation()    // 当前路由位置信息

  /**
   * 底部导航配置
   * 定义四个主要功能模块的导航项
   * 使用emoji图标避免图标库依赖问题
   */
  const tabs = [
    {
      key: '/home',           // 路由路径
      title: '诊疗首页',       // 显示标题
      icon: '🏠'              // 图标（使用emoji）
    },
    {
      key: '/website',
      title: '微官网',
      icon: '🌐'
    },
    {
      key: '/message',
      title: '消息中心',
      icon: '💬'
    },
    {
      key: '/profile',
      title: '我的',
      icon: '👤'
    }
  ]

  return (
    <div className={styles.bottomNav}>
      <TabBar 
        className={styles.tab}
        activeKey={location.pathname}  // 当前路径作为激活项
        onChange={navigate}            // 点击时触发路由跳转
      >
        {tabs.map(item => (
          <TabBar.Item 
            key={item.key} 
            icon={item.icon} 
            title={item.title} 
          />
        ))}
      </TabBar>
    </div>
  )
}

export default BottomNav
